<template>
	<view v-if="pageShow">
		<view class="mainpadding titletext hei_text bold">基本信息</view>
		<view class="flexbetween ffffff mainpadding pdl">
			<view class="hui_text main_size bold">員工名稱</view>
			<input class="hei_text main_size bold textright" type="text" placeholder="請輸入員工名稱" v-model="name">
		</view>
		<view class="flexbetween ffffff mainpadding pdl">
			<view class="hui_text main_size bold">行動電話</view>
			<input class="hei_text main_size bold textright" type="number" placeholder="請輸入行動吧電話" :disabled="id?true:false" v-model="phone">
		</view>
		<view class="flexbetween mainpadding ffffff border margin_bottom3" v-if="!id">
			<view class="flexleft">
				<view class="hui_text main_size bold">驗證碼</view>
				<input type="text" v-model="code" maxlength="12" class="ipt hei_text main_size bold textright" placeholder-style="color:#999"
					placeholder="請輸入驗證碼" />
			</view>
			<view class="get-code flexright margin_right" style="min-width: 200rpx;" v-if="codeTime == 60" @click="getCode">獲取驗證碼</view>
			<view class="get-code flexright margin_right"  style="min-width: 200rpx;"  v-else>{{ codeTime }}s後重新發送</view>
		</view>
		<view class="flexbetween ffffff mainpadding pdl">
			<view class="hui_text main_size bold">入職時間</view>
			<view class="flexright" @click="show=true">
				<input class="hei_text main_size bold textright" type="text" disabled placeholder="請選擇入職時間"
					v-model="addtime">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="flexbetween ffffff mainpadding pdl">
			<view class="hui_text main_size bold">服務範圍</view>
			<view class="flexright" @click="goRegionSelect">
				<input class="hei_text main_size bold textright" type="text" disabled placeholder="請選擇服務範圍"
					v-model="address">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="ffffff mainpadding pdl">
			<view class="flexbetween">
				<view class="hui_text main_size bold" >工作站</view>
				<view class="flexright"  @click="selectgzz">
						<!-- <input class="main_size bold hei_text textright" type="text" placeholder="請選擇工作站" disabled
							v-model="shopwork_name" > -->
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			
			<view style="padding: 0 10rpx;">
				<view class="margin_top1 flexbetween" v-for="item in gzzList" :key="item.id">
					<view class="main_size hei_text">{{item.name}}</view>
					<view class="huang_text main_size">{{item.tbzz}}
					<text v-show="item.tbzz && item.zd_status==1">/</text><text v-show="item.zd_status==1">轉</text></view>
				</view>
			</view>
		</view>
		
		<view class="flexbetween ffffff mainpadding pdl">
			<view class="hui_text main_size bold" >發票打印機</view>
			<view class="flexright"  @click="goSelectDa(0)">
					<input class="main_size bold hei_text textright" type="text" placeholder="請選擇發票打印機" disabled
						v-model="fp_name" >
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="flexbetween ffffff mainpadding pdl">
			<view class="hui_text main_size bold" >收據打印機</view>
			<view class="flexright"  @click="goSelectDa(1)">
					<input class="main_size bold hei_text textright" type="text" placeholder="請選擇收據打印機" disabled
						v-model="sj_name" >
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="flexbetween ffffff mainpadding pdl">
			<view class="hui_text main_size bold">E-mail</view>
			<input class="hei_text main_size bold textright" type="text" placeholder="請輸入E-mail" v-model="email">
		</view>
		<view class="flexbetween ffffff mainpadding pdl">
			<view class="hui_text main_size bold">狀態</view>
			<u-radio-group v-model="status" placement="row" circle>
				<u-radio activeColor="#ff8505" :customStyle="{marginRight: '30rpx'}" label="開啓" name="0"></u-radio>
				<u-radio activeColor="#ff8505" label="禁用" name="1"></u-radio>
			</u-radio-group>
		</view>
		<view style="padding-bottom: 150rpx;">
			<view class="mainpadding titletext hei_text bold">權限</view>
			<view class="flexbetween ffffff mainpadding pdl" v-for="(item,index) in common" :key="index">
				<view class="hui_text main_size bold">{{item.name}}</view>
				<u-switch inactiveColor="rgb(230, 230, 230)" v-model="item.isSelect" activeColor="#feb800"></u-switch>
			</view>
		</view>
		<view class="mainpadding posibottom" style="bottom: 0;">
			<view class="submitbtn" @click="submit">確認</view>
		</view>
		<!-- 多选選擇地址 -->
		<tki-tree ref="tkitree" :range="listData" :multiple="true" title="選擇城市" :foldAll="true" :selectParent="true"
			confirmColor="#ff8505" @confirm="treeConfirm" @cancel="treeCancel" />
		<!-- 模态框 -->
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalCancel="modalCancel"
			@modalSure="modalSure"></moDal><!-- 模态框 -->
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
		<u-datetime-picker cancelText="取消" confirmText="確認" :show="show" v-model="value1" mode="date" confirmColor="#FFB800" @cancel="show=false"
			@confirm="confirmTime"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				minDate: 31507200000, //可选的最小時間(1971-01-01)
				maxDate: Number(new Date()), //可选的最大時間
				common: [{
					id: 1,
					name: "資產管理",
					isSelect:false
				}, {
					id: 2,
					name: "店鋪管理",
					isSelect:false
				}, {
					id:3,
					name: "核銷記錄",
					isSelect:false
				},{
					id: 4,
					name: "優惠券管理",
					isSelect:false
				}, {
					id: 5,
					name: "免運券管理",
					isSelect:false
				}, {
					id: 6,
					name: "商品評價",
					isSelect:false
				}, {
					id: 7,
					name: "發票管理",
					isSelect:false
				}, {
					id: 8,
					name: "員工管理",
					isSelect:false
				}, {
					id: 9,
					name: "商品管理",
					isSelect:false
				}, {
					id: 10,
					name: "分配管理",
					isSelect:false
				}, {
					id: 11,
					name: "功能服務",
					isSelect:false
				}, {
					id: 12,
					name: "客戶管理",
					isSelect:false
				}, {
					id: 13,
					name: "商品統計",
					isSelect:false
				}, {
					id: 14,
					name: "物流管理",
					isSelect:false
				}, {
					id: 15,
					name: "收款管理",
					isSelect:false
				}, {
					id: 16,
					name: "工作站",
					isSelect:false
				}, {
					id: 17,
					name: "產品分類",
					isSelect:false
				}, {
					id: 18,
					name: "計算方式",
					isSelect:false
				}, {
					id: 19,
					name: "打印機管理",
					isSelect:false
				},{
					id: 20,
					name: "分店管理",
					isSelect:false
				},{
					id: 21,
					name: "分店付款",
					isSelect:false
				},{
					id: 22,
					name: "配送訂單",
					isSelect:false
				},{
					id: 23,
					name: "結算單",
					isSelect:false
				},{
					id: 24,
					name: "自動接單",
					isSelect:false
				}, {
					id: 25,
					name: "營業狀態",
					isSelect:false
				},{
					id: 26,
					name: "購買員工人數",
					isSelect:false
				},{
					id: 27,
					name: "叫號重置",
					isSelect:false
				},],
				// 多选城市
				listData: [],
				citysArr: [], //選擇的城市信息
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				// 時間選擇
				messageTime: {
					timeShow: false,
					title: "入職時間",
					mode: "date"
				},
				shop_id: uni.getStorageSync("shop_id"),
				name: "", //員工名称
				phone: "", //行动电话
				addtime: "", //入职時間
				address: [], //服務范围
				workress: "", //工作站
				email: "", //邮箱
				status: "0", //状态:0=正常,1=禁用
				authority: [], //权限
				id: "", //编辑員工的id
				pageShow: false,
				shopwork_id:'',
				shopwork_name:"",
				gzzList:[],
				code:"",
				codeTime: 60, //倒計时時間
				captcha: "", //验证碼
				isClick:true,
				codesure:"",
				fp_id:"",
				fp_name:"",
				sj_id:"",
				sj_name:"",
			}
		},
		onLoad(options) {
			uni.$on("selectWorkId", data => {
				this.gzzList = data
				let shopwork_id = []
				let shopwork_name = []
				data.forEach(item=>{
					shopwork_id.push(item.id)
					shopwork_name.push(item.name)
				})
				this.shopwork_id = shopwork_id.join()
				this.shopwork_name = shopwork_name.join()
			})
			uni.$on("selectInfo", (data) => {
				if(data.type==0){//發票
					this.fp_id=data.id
					this.fp_name = data.name
				}
				if(data.type==1){//收據
					this.sj_id=data.id
					this.sj_name = data.name
				}
			})
			let arr = JSON.parse(JSON.stringify(citys.data))
			let obj = arr[0]
			this.listData = obj.children
			if (options.id) {
				this.id = options.id
				uni.setNavigationBarTitle({
					title:"編輯員工"
				})
				this.getInfo()
			} else {
				this.pageShow = true
			}
		},
		onUnload() {
			uni.$off("selectWorkId")
			uni.$off("selectInfo")
		},
		methods: {
			selectgzz() {
				let data = {
					type:1,
					gzzList:this.gzzList,
				}
				uni.navigateTo({
					url:"/pages/workbench/gongzuot?msg=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 获取验证碼
			goSelectDa(type) { //選擇打印機
				uni.navigateTo({
					url: "/pages/workbench/dayinjgl?selectType=3&type=" + type
				})
			},
			getCode() {
				if (this.isClick) {
					if(!this.phone){
						this.http.toast("請輸入手機號")
						return false
					}
					this.isClick = false;
					let data = {
						mobile: this.phone,
						event:"addstaffcer"
					};
					this.http.request("/api/sms/fs", 'POST', data).then((res) => {
						if (res.code == 1) {
							this.downTime();
							uni.showToast({
								title: "發送成功",
								icon: "none",
							});
							this.codesure = res.data
						} else {
							this.isClick = true;
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					});
				}
			},
			// 发送验证碼倒計时
			downTime() {
				if (this.codeTime == 0) {
					this.codeTime = 60;
					this.isClick = true;
					return;
				} else {
					this.codeTime--;
					this.isClick = false;
					setTimeout(() => {
						this.downTime();
					}, 1000);
				}
			},
			selectRule(url) {
				console.log(123)
				uni.navigateTo({
					url
				})
			},
			timeConfirm(e) {
				this.time = e
			},
			goRegionSelect() { //地區選擇
				//打开選擇器
				this.$refs.tkitree._show();
			},
			treeCancel(e) {
				//关闭選擇器
				this.$refs.tkitree._hide();
			},
			treeConfirm(e) {
				console.log(e, "i999");
				let arr = []
				e.forEach(item => {
					arr.push(item.text)
				})
				this.address = arr
			},
			confirmTime(e) {
				console.log(e)
				this.addtime = this.secondDate(e.value, 1, 1)
				console.log(this.addtime)
				this.show = false
			},
			async getInfo() { //員工详情
				let res = await this.http.request('/api/shop/deailstaff', 'POST', {
					id: this.id
				})
				if (res.code == 1) {
					this.name = res.data.name
					this.phone = res.data.phone
					this.addtime = res.data.addtime

					res.data.address.split(",").forEach(item=>{
						this.address.push(item)
					})
					this.shopwork_id = res.data.shopwork_id
					this.workress = res.data.workress
					this.email = res.data.email
					this.status = String(res.data.status)
					this.common.forEach(item=>{
						res.data.authority.split(",").forEach(value=>{
							if(item.id==value){
								item.isSelect=true
							}
						})
					})
					if(res.data.fpprinterinfo){
						this.fp_id = res.data.fp_id
						this.fp_name = res.data.fpprinterinfo.name
					}
					if(res.data.sjprinterinfo){
						this.sj_id = res.data.sj_id
						this.sj_name = res.data.sjprinterinfo.name
					}
					this.pageShow = true
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async submit() {
				if (!this.name) {
					this.http.toast("請輸入員工名稱")
					return false
				}
				if (!this.phone) {
					this.http.toast("請輸入行動電話")
					return false
				}
				if (!this.addtime) {
					this.http.toast("請選擇入職時間")
					return false
				}
				if (!this.address) {
					this.http.toast("請輸入服務範圍")
					return false
				}
				// if (!this.shopwork_id) {
				// 	this.http.toast("請輸入工作站")
				// 	return false
				// }
				if (!this.email) {
					this.http.toast("請輸入E-mail")
					return false
				}
				if(this.id==''){
					if (!this.code) {
						this.http.toast("請輸入驗證碼！")
						return false
					}
				}
				
				this.common.forEach(item => {
					if (item.isSelect) {
						this.authority.push(item.id)
					}
				})
				let url="",text="";
				let data={
					id:this.id,
					shop_id: this.shop_id, //店鋪id
					name: this.name, //員工名称
					phone: this.phone, //行动电话
					addtime: this.addtime, //入职時間
					code:this.code,
					address: this.address.join(), //服務范围
					workress: this.workress, //工作站
					shopwork_id: this.shopwork_id, //工作站
					email: this.email, //邮箱
					status: this.status, //状态:0=正常,1=禁用
					authority: this.authority.join(), //权限
					fp_id:this.fp_id,
					sj_id:this.sj_id,
				}
				if(!this.id){ //添加
					url="/api/shop/addstaff"
					text="添加成功"
					delete(data.id)
				}else{ //编辑
					url="/api/shop/editstaff"
					text="修改成功"
				}
				console.log(this.authority)
				uni.showLoading({
					mask:true,
					title:"請稍後"
				})
				let res = await this.http.request(url, 'POST', data)
				uni.hideLoading()
				if (res.code == 1) {
					this.http.toast(text)
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			modalCancel() {
				this.modal.modalShow = false
			},
			modalSure() {
				this.modal.modalShow = false
				if (this.modal.title == "您的員工人數已達上限,請購買員工人數!") {
					uni.navigateTo({
						url: "/pages/workbench/renshugm"
					})
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	::v-deep.u-radio-group {
		flex: none !important;
	}

	.pdl {
		border-bottom: 1rpx solid rgba(0, 0, 0, .03);
	}
	.get-code {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 50rpx;
		text-decoration: underline;
		color: #FFB800;
	}
</style>